<template>
  <div class="cart-list-item" v-if="Object.keys(goodsItem).length">
    <!-- 这个组件分为左右两部分 -->

    <!-- 左 -->
    <div class="item-left">
      <!-- 选中按钮 -->
      <div class="item-select">
        <!-- 选中按钮组件 -->
        <check-button @click.native="selectHanlder" :is-checked="goodsItem.done" />
      </div>
      <!-- 图片 -->
      <div class="item-img">
        <img :src="goodsItem.image" alt="商品图片" />
      </div>
    </div>

    <!-- 右 -->
    <div class="item-right">
      <!-- 标题 -->
      <div class="item-title">
        <p>{{ goodsItem.title }}</p>
      </div>
      <!-- 简介 -->
      <div class="item-goodsInfo">
        <p>{{ goodsItem.desc }}</p>
      </div>
      <!-- 价格与数量 -->
      <div class="item-bottom">
        <span class="item-price">¥{{ goodsItem.price }}</span>
        <span class="item-number">x{{ goodsItem.count }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CheckButton from 'components/content/CheckButton/CheckButton.vue'
import * as types from 'store/mutations-types'

export default {
  name: 'CartListItem',
  props: {
    goodsItem: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    CheckButton
  },
  data () {
    return {}
  },
  mounted () {},
  updated () {},
  methods: {
    selectHanlder () {
      this.$store.commit(types.EDIT_GOODS_STATE, this.goodsItem.iid)
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.cart-list-item {
  display: flex;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #ccc;

  // 左
  .item-left {
    display: flex;
    align-items: center;

    .select {
      width: 14%;
      background-color: yellow;
    }

    .item-img {
      padding: 5px;

      > img {
        display: block;
        width: 80px;
        height: 100px;
        border-radius: 5px;
      }
    }
  }

  // 右
  .item-right {
    flex: 1;
    padding: 5px;
    // TODO: 必须要加overfow:hidden
    overflow: hidden;

    .item-title,
    .item-goodsInfo {
      > p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .item-title {
      color: #000;
      font-size: 17px;
      font-weight: bold;
    }

    .item-goodsInfo {
      color: #878787;
      font-size: 14px;
      margin: 15px 0 25px;
    }

    .item-bottom {
      display: flex;
      justify-content: space-between;
      font-size: 16px;

      .item-price {
        color: var(--color-high-text);
        font-weight: bold;
      }
    }
  }
}
</style>
